<template>
    <div class="category">
        <van-tabs 
        v-model:active="active" 
        type="card" 
        animated 
        sticky
        name
        color="#fa541c" 
        @click-tab="changeActive"
        >
  <van-tab title="水果">
        <van-card
            v-for="item in fruit"
            :key="item.id"
            :price="item.price"
            :desc="item.shop"
            :title="item.title"
            :thumb="item.image"
            >
            <template #num>
                <cart :item="item"></cart>
            </template>
        </van-card>
    </van-tab>
  <van-tab title="蔬菜">
    <van-card
            v-for="item in greens"
            :key="item.id"
            :price="item.price"
            :desc="item.shop"
            :title="item.title"
            :thumb="item.image"
            >
            <template #num>
                <cart :item="item"></cart>
            </template>
        </van-card>
  </van-tab>
  <van-tab title="海鲜">
    <van-card
            v-for="item in seafood"
            :key="item.id"
            :price="item.price"
            :desc="item.shop"
            :title="item.title"
            :thumb="item.image"
            >
            <template #num>
                <cart :item="item"></cart>
            </template>
        </van-card>
  </van-tab>
  <van-tab title="肉禽">
    <van-card
            v-for="item in meat"
            :key="item.id"
            :price="item.price"
            :desc="item.shop"
            :title="item.title"
            :thumb="item.image"
            >
            <template #num>
                <cart :item="item"></cart>
            </template>
        </van-card>
  </van-tab>
  <van-tab title="冻货">
    <van-card
            v-for="item in freeze"
            :key="item.id"
            :price="item.price"
            :desc="item.shop"
            :title="item.title"
            :thumb="item.image"
            >
            <template #num>
                <cart :item="item"></cart>
            </template>
        </van-card>
  </van-tab>
</van-tabs>

</div>

</template>


<script setup>
import { computed } from 'vue'
import { useStore } from 'vuex' 
import cart from '../../component/addcart.vue'

const store = useStore()
let active = computed(()=>{
    return store.getters['homeModule/getCategoryNum']
})
//获取水果
let fruit = computed(()=>store.getters['goodsList/getFruit'])

//获取蔬菜
let greens = computed(()=> store.getters['goodsList/getGreens'])

//获取海鲜
let seafood = computed(()=> store.getters['goodsList/getSeafood'])

//获取肉禽
let meat = computed(()=> store.getters['goodsList/getMeat'])

//获取冻货
let freeze = computed(()=> store.getters['goodsList/getFreeze'])
// onMounted(()=>{
//     console.log(active.value);
//     console.log(fruit.value);
// })

function changeActive(){
    // store.commit('homeModule/changeCategoryNum',)
}

</script>


<style lang="less" scoped>
@import '../../style/common.less';
.category{
    background: @g2;
}

/deep/.van-card{
    background: #fff;
}
/deep/ .van-badge__wrapper{
    color: #fa541c;
}
/deep/.van-card__price{
    color: red;
}

</style>